<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    float: left;
    width: 100%;
    height: auto !important;
    word-break: break-all;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-form>>>.layui-form-select {
    z-index: inherit;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    /*white-space: nowrap;*/
}

select {
    color: #eee
}

option {
    color: #000;
}

.layui-inline {
    padding: 5px 0;
}

.layui-colla-content {
    border-top: none;
}

.layui-colla-title {
    background: none;
    padding-left: 15px !important;
    height: auto;
}

.department>>>.layui-colla-icon {
    left: auto;
    right: 15px !important;
}

.layui-collapse {
    border: 0 !important;
}

/*.department {*/
/*    position: relative;*/
/*}*/
.openicon {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 100000;
    border-radius: 50%;
    color: #fff;
    width: 24px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    background: rgba(0, 150, 136, 0.7);
}

.nodata {
    background: #f2f2f2;
    color: #333;
    text-align: center;
    padding: 5px 0;
}

.layui-table td p,
.layui-table td .rj-cell {
    padding: 3px 0;
}

.layui-table td {
    text-align: left !important;
}

.rj-wrap {
    font-size: 0;
    width: 100%;
    padding: 0 10px;
    display: flex;
}

.cont-left {
    width: 95%;
    display: inline-block;
    font-size: 14px;
    padding: 10px;
}

.cont-right {
    width: 27%;
    display: inline-block;
    font-size: 14px;
    padding: 10px;
}

.cont-tit {
    font-size: 12px;
    padding: 5px 10px;
    color: #bbb;
}

.cont-box {
    background: #fff;
    margin: 10px 0;
}

.rj-cell {
    display: inline-block;
    padding: 5px 10px;
}

.attachimg {
    width: 80px;
    padding: 5px 10px;
    height: 80px;
}

.attachimg:hover {
    cursor: pointer;
}

.layui-elem-field legend.btns {
    position: absolute;
    right: 20px;
    top: -2px;
}
.img{
    cursor: pointer;
}
</style>

<template>
<div class="department">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>货运订单详情</legend>
    </fieldset>
    <div class="rj-wrap">
        <div class="cont-left" id="viewSell">
            <div class="cont-box" style="margin-top: 5px;">
                <p class="cont-tit">运单详情</p>
                <div>
                    <div class="rj-cell"><label>运单编号：{{data.order.code}}</label></div>
                    <div class="rj-cell"><label>种植户：{{data.order.plantor}}</label></div>
                    <div class="rj-cell"><label>地块：{{data.order.arealand}}</label></div>
                </div>
                <div>
                    <div class="rj-cell"><label>承运人：{{data.order.carcode}} {{data.order.drivername}} {{data.order.driverphone}}</label></div>
                </div>
                <div>
                    <div class="rj-cell"><label>货品：{{data.order.variety}} {{data.order.specification}}</label><span></span></div>
                    <div class="rj-cell"><label>库房：{{data.order.storeroom}}</label><span></span></div>
                </div>
                <div>
                    <div>
                        <div class="rj-cell"><label>装车时间：</label><span>{{data.order.createtime}}</span> </div>
                        <div class="rj-cell"><label>卸货时间：</label><span>{{data.order.unloadtime}}</span></div>
                    </div>
                </div>
                <div class="rj-cell"><label>备注：{{data.order.remark}}</label></div>
            </div>
            <div class="cont-box">
                <p class="cont-tit">质检单</p>
                <div>
                    <div class="rj-cell">
                        <label v-if="data.order">质检标准：{{data.order.qaname}}</label>
                    </div>
                    <div class="rj-cell">

                        <label v-if="data.qa">抽检袋数：{{data.qa.chkpknum}}</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.qa">抽检重量：{{data.qa.chkwght}}</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.qa">合格重量：{{data.qa.okweight}}</label>
                    </div>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 1">
                    <label>扣杂方式：统一扣杂</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 2">
                    <label>扣杂方式：分步扣杂</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 3">
                    <label>扣杂方式：八三扣杂</label>
                </div>
                <div class="rj-cell">
                    <label v-if="data.qa">土杂重量：{{data.qa.soilchkweight}}</label>
                </div>
                <div class="rj-cell">
                    <label v-if="data.qa">不合格重量：{{data.qa.unqualifiedchkweight}}</label>
                </div>

                <div>
                    <div class="rj-cell">
                        <label v-if="data.qa">土杂率：{{data.qa.soilchkrate}}%</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.qa">扣杂率：{{data.qa.soilchkrate}}%</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.qa">大薯率：{{data.qa.bigrate}}%</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.qa">质检人员：{{data.qa.operatorname}}</label>
                    </div>
                </div>
                <div>
                    <div class="rj-cell">
                        <label>质检时间: {{data.qa.createdate}}</label>
                    </div>
                </div>
                <hr>
                <div v-if="data.qaImgs" class="photo-group2" id='photo-list2' >
                    <img class="img" @click="getImg2" v-for="item in data.qaImgs" :key="item.id" style="width:90px;height:120px;padding:0px 5px 10px 10px" :src="item.url+'.png'" :data-img="item.url+'.png'" />
                </div>
            </div>
            <div class="cont-box" v-if="data.standars">
                <p class="cont-tit">扣杂情况</p>
                <div class="rj-cell">
                    <label>土杂病害：{{data.standars[0].price.toFixed(2)}}元/吨 {{data.standars[0].qaresult * 100}}%</label>
                </div>
                <div class="rj-cell">
                    <label>不合格薯：{{data.standars[1].price.toFixed(2)}}元/吨 {{data.standars[1].qaresult * 100}}%</label>
                </div>
            </div>
            <div class="cont-box">
                <p class="cont-tit">过磅单</p>
                <div>
                    <div class="rj-cell" v-if="data.order.setlwgtype == 1">
                        <label v-if="data.order">结算净重：{{data.order.weight.toFixed(4)}}（吨）</label>
                    </div>
                    <div class="rj-cell" v-if="data.order.setlwgtype == 2">
                        <label v-if="data.order">结算净重：{{data.order.hweight.toFixed(4)}}</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.weighlist">货损：{{ data.weighlist.weight.toFixed(6)}}（吨）</label>
                    </div>
<!--                    <div class="rj-cell">-->
<!--                        <label v-if="data.pullweighlist">过磅时间：{{data.weighlist.createtime}}</label>-->
<!--                    </div>-->
                </div>
                <hr>
                <div v-if="data.pullweighlist">
                    <p class="cont-tit">拉货过磅单</p>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.pullweighlist">过磅重量：{{data.pullweighlist.lbweight}}</label>
                        </div>
                        <div class="rj-cell">
                            <label v-if="data.pullweighlist">净重：{{data.pullweighlist.weight}}</label>
                        </div>
                        <div class="rj-cell">
                            <label v-if="data.order">包装重量：{{data.order.pkgwght}}</label>
                        </div>
                    </div>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.pullweighlist">过磅人：{{data.pullweighlist.operName}}</label>
                        </div>
                    </div>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.pullweighlist">过磅时间：{{data.pullweighlist.createtime}}</label>
                        </div>
                    </div>
                   <div v-if="data.lbImgs.length!==0" class="photo-group" id='photo-list'>
                        <img class="img"  @click="getImg" v-for="item in data.lbImgs" :key="item.id" style="width:90px;height:120px;padding:0px 5px 10px 10px" :src="item.url+'.png'" :data-img="item.url+'.png'" />
                    </div>
                </div>
                <hr>
                <div class="cont-box">
                    <p class="cont-tit">卸货过磅单</p>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.weighlist">过磅重量：{{data.weighlist.lbweight}}</label>
                        </div>
                        <div class="rj-cell">
                            <label v-if="data.weighlist">净重：{{data.weighlist.weight}}</label>
                        </div>
                        <div class="rj-cell">
                            <label v-if="data.order">包装重量：{{data.order.pkgwght}}</label>
                        </div>
                    </div>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.weighlist">过磅人：{{data.weighlist.operName}}</label>
                        </div>
                    </div>
                    <div>
                        <div class="rj-cell">
                            <label v-if="data.weighlist">过磅时间：{{data.weighlist.createtime}}</label>
                        </div>
                    </div>
                    <div v-if="data.lbImgs.length!==0" class="photo-group" id='photo-list'>
                        <img class="img"  @click="getImg" v-for="item in data.lbImgs" :key="item.id" style="width:90px;height:120px;padding:0px 5px 10px 10px" :src="item.url+'.png'" :data-img="item.url+'.png'" />
                    </div>
                </div>
            </div>

            <div class="cont-box">
                <p class="cont-tit">验收单</p>
                <div class="rj-cell">
                    <label v-if="data.accept">单价：{{data.accept.price}}</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == '2'">
                    <label v-if="data.qa">土杂率：{{data.qa.soilchkrate}}%</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == '1'">
                    <label v-if="data.accept">扣杂率：{{data.accept.deductrate}}%</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 1">
                    <label>扣杂方式：统一扣杂</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 2">
                    <label>扣杂方式：分步扣杂</label>
                </div>
                <div class="rj-cell" v-if="data.order.deducttype == 3">
                    <label>扣杂方式：八三扣杂</label>
                </div>
                <div class="rj-cell">
                    <label v-if="data.accept">扣杂前金额：{{data.accept.amount}}</label>
                </div>
                <div>
                    <div class="rj-cell">
                        <label v-if="data.accept">结算金额：{{data.accept.finalamount}}</label>
                    </div>
                    <div class="rj-cell">
                        <label v-if="data.accept">验收人员：{{data.accept.operatorname}}</label>
                    </div>
                </div>
                <div>
                    <div class="rj-cell">
                        <label v-if="data.accept">验收时间：{{data.accept.createdate}}</label>
                    </div>
                </div>
                <hr>
                <div v-if="data.acceptImgs" class="photo-group1" id='photo-list1' >
                    <img class="img" @click="getImg1" v-for="item in data.acceptImgs" :key="item.id" style="width:80px;height:100px;padding:0px 5px 10px 10px" :src="item.url+'.png'" :data-img="item.url+'.png'" />
                </div>
            </div>
        </div>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            guid: '',
            data: {}
        }
    },
    mounted() {
        this.guid = this.$parent.guid
        this.getForder()
        $(".photo-group").click(function () {
            layer.photos({
                photos: '#photo-list',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        });
        $(".photo-group1").click(function (){
            layer.photos({
                photos: '#photo-list1',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
        $(".photo-group2").click(function (){
            console.warn("出现的数据")
            layer.photos({
                photos: '#photo-list2',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        })
    },
    methods: {
        getForder() {
            let loader = layui.layer.load();
            let that = this
            this.axios({
                    method: 'get',
                    responseType: 'json',
                    url: '/harvest/Freightorder!getForder.action',
                    params: {
                        guid: that.guid
                    }
                }).then(response => {
                    if (response.status === 200) {
                        that.data = response.data

                        layer.close(loader);
                    }
                })
                .catch(error => {
                    that.alert("系统错误");
                    layer.close(loader);
                })
        },
        getImg() {
            layer.photos({
                photos: '#photo-list',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        },
        getImg1() {
            layer.photos({
                photos: '#photo-list1',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        },
        getImg2() {
            layer.photos({
                photos: '#photo-list2',
                shadeClose: false,
                closeBtn: 2,
                anim: 0
            });
        }
    }
}
</script>
